<template>
	<view class="container">
		<view class="btn-opertaion" @click="changeOperate">{{showDelBtn?'删除':'管理'}}</view>
		<view v-if="allCartList.length" class="product-list">
			<u-checkbox-group :value="checkCartIds" placement="column" @change="checkboxChange">
				<view class="comp-item f-a-center" v-for="(item, index) in allCartList" :key="index">
					<u-checkbox :name="item.id" :customStyle="{marginRight: '4rpx'}" shape="circle" size="38rpx" iconSize="26rpx"
						activeColor="#FFC046">
					</u-checkbox>
					<submitProduct :item="item" @onNumChange="num=>onNumChange(item,num)" style="width: 100%;" />
				</view>
			</u-checkbox-group>
		</view>
		<dataEmpty v-else></dataEmpty>


		<view class="footer-total f-c-between">
			<view class="f-a-center" @click="checkedAllBtn">
				<view v-if="checkCartAll" class="checked-circle my-checked f-center">
					<u-icon name="checkmark" color="#FFFFFF" size="26rpx"></u-icon>
				</view>
				<view v-else class="checked-circle"></view>
				<view class="select-all">全选</view>
			</view>

			<view class="operate-btn f-a-center">
				<view v-if="!showDelBtn" class="total-price f-a-center">
					<view class="total-title">合计：</view>
					<view class="current">{{checkCardPrice}}</view>
				</view>
				<button v-if="showDelBtn" class="btn-settle btn-delete f-center" :disabled="checkCartIds.length==0"
					@click="deleteCart">删除</button>
				<button v-else class="btn-settle f-center" :disabled="checkCartIds.length==0" @click="submitBtn">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showDelBtn: false, //操作和删除
			}
		},
		computed: {
			...mapGetters(['allCartList', 'checkCartIds', 'allCartGoodsCount', 'checkCardPrice', 'checkCardCount',
				'checkCartAll'
			]),
		},
		onShow() {
			if (this.token) {
				this.$store.commit('SET_checkCartIds', [])
				this.getMyCartList()
			}
		},
		methods: {
			...mapMutations(['SET_checkCartIds']),
			//获取我的购物车
			getMyCartList() {
				this.$store.dispatch('ac_getAllCartList')
			},
			//删除
			deleteCart() {
				this.$store.dispatch('ac_del_cartItems', this.checkCartIds)
			},
			// 数量改变
			onNumChange(item, num) {
				this.$store.dispatch('ac_editCartCount', {
					id: item.id,
					num
				})
			},
			//点击全选时
			checkedAllBtn() {
				if (this.checkCartAll) {
					this.SET_checkCartIds([])
				} else {
					this.SET_checkCartIds(this.allCartList.map(v => v.id))
				}
			},

			//点击每项商品时
			checkboxChange(e) {
				this.SET_checkCartIds(e)
			},

			//编辑&&完成
			changeOperate() {
				this.SET_checkCartIds([])
				this.showDelBtn = !this.showDelBtn
			},

			//去结算
			submitBtn() {
				this.$store.commit('SET_submitType', '1')
				uni.navigateTo({
					url: '/pages/cart/submit'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
	}

	.btn-opertaion {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		padding: 34rpx 32rpx 22rpx 0;
		text-align: right;
	}

	.product-list {
		.comp-item {
			padding: 20rpx 24rpx 18rpx 18rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.icon-select {
				margin-right: 18rpx;
				font-size: 28rpx;
			}

			.icon-xuanzhong {
				color: #FFC046;
			}

			.icon-weixuanzhong {
				color: #bbbbbb;
			}
		}
	}

	.footer-total {
		width: 100%;
		padding: 20rpx 24rpx 20rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		/* #ifdef H5 */
		bottom: 50px; //tabbar的高度
		/* #endif */
		/* #ifndef H5 */
		bottom: 0px;
		/* #endif */
		left: 0;

		.checked-circle {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			background-color: #FFFFFF;
			border: 1px solid #c8c9cc;
		}
		
		.my-checked{
			border: 1px solid #ffc046;
			background-color: #ffc046;
		}

		.select-all {
			font-weight: 500;
			font-size: 28rpx;
			color: #9B9B9B;
			margin-left: 14rpx;
		}

		.total-price {
			margin-right: 30rpx;

			.total-title {
				font-weight: 500;
				font-size: 22rpx;
				color: #9B9B9B;
			}

			.current {
				color: #EC633A;
				font-size: 44rpx;
				font-weight: 400;
				position: relative;

				&:before {
					content: '¥';
					font-size: 28rpx;
					margin-right: 2rpx;
				}

				.sm-price {
					font-size: 26rpx;
					font-weight: 600;
				}
			}
		}

		.operate-btn {
			.btn-settle {
				width: 180rpx;
				height: 70rpx;
				background: $my-primary;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.btn-delete {
				border: 1px solid $my-primary;
				color: $my-primary;
				background-color: #FFFFFF;
			}
		}
	}
</style>